<template>
    <el-dialog
      title="创建提问箱"
      v-model="internalVisible"
      width="30%"
      @close="closeDialog"
    >
      <!-- 表单内容 -->
      <el-form :model="form" :rules="rules" ref="formRef" label-width="80px">
        <el-form-item label="名称" prop="name">
          <el-input v-model="form.name" placeholder="请输入提问箱名称"></el-input>
        </el-form-item>
  
        <el-form-item label="简介" prop="description">
          <el-input type="textarea" v-model="form.description" placeholder="请输入简介"></el-input>
        </el-form-item>
  
      </el-form>
  
      <!-- 弹窗的底部操作按钮 -->
      <template #footer>
        <el-button @click="closeDialog">取消</el-button>
        <el-button type="primary" @click="submitForm">提交</el-button>
      </template>
    </el-dialog>
  </template>
  
  <script>
  import { ref } from 'vue';
  import { ElMessage } from 'element-plus';
  
  export default {
    name: 'CreateBoxPage',
    emits: ['close', 'submit'],
    setup(_, { emit }) {
      // 内部变量控制弹窗显示
      const internalVisible = ref(true);
  
      // 表单数据
      const form = ref({
        name: '',
        description: '',
      });
      
       // 表单验证规则
    const rules = {
      name: [
        { required: true, message: '名称不能为空', trigger: 'blur' }
      ],
      description: [
        { required: true, message: '简介不能为空', trigger: 'blur' }
      ],
    };

      const formRef = ref(null);
  
      const closeDialog = () => {
        internalVisible.value = false; // 关闭内部弹窗
        emit('close'); // 通知父组件关闭
        resetForm();
      };
  
      const resetForm = () => {
        form.value = {
          name: '',
          description: '',
        };
        if (formRef.value) formRef.value.clearValidate();
      };
  
      const submitForm = () => {
        formRef.value.validate((valid) => {
          if (valid) {
            ElMessage.success('提问箱已创建！');
            emit('submit', form.value); // 提交表单数据
            closeDialog();
          } else {
            ElMessage.error('请检查表单输入');
          }
        });
      };
  
      return {
        internalVisible,
        form,
        formRef,
        closeDialog,
        submitForm,
        rules,
      };
    },
  };
  </script>
  
<style scoped>

</style>